<template>
  <div class="app">
    <h2>我是App组件</h2>
    <h3 v-text="msg">123</h3>
    <h3 v-beauty="msg">123</h3>
    <h3 v-haokan-big="n">123</h3>
  </div>
</template>

<script>
  export default {
    name:'App',
    data() {
      return {
        msg:'hello',
        n:1
      }
    },
    directives:{
      // haha函数何时调用？ —— 有人使用v-haha指令时
      // haha函数中的this是谁？ —— 不是vc，也不是vm，不去触碰
      beauty(element,{value}){
        console.log('@',element,value)
        element.innerText += value
        element.style.color = 'red'
        element.style.backgroundColor = 'yellow'
      },
    }
  }
</script>

<style>
  .app {
    background-color: gray;
    padding: 20px;
  }
</style>